<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Member Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="modal.css"/>
</head>
<body>
	<!--
	<div id="app" class="container">
	-->
	<div id="app" class="container-fluid">

	<div id="objectlist" v-show="mode=='modeItemListView'">
	
	<div class="row-fluid">
		<div class="col-sm-12">
			<h3 class="page-header text-center">
			通信录 <small>(Member Viewer)</small>
			</h3>
		</div>
	</div>

	<!--
	<div class="row">
		<div>
		  <ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
			<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
			<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
			<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
		  </ul>

		  <div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="home">
	-->

	<div class="row" >
		<div class="col-sm-12">
			<div class="col-sm-3">
				<button class="btn btn-default" v-on="click:removeSelected($event)">删除选中记录</button>
				<button class="btn btn-default" v-on="click: showModal=true">新增</button>
				<button class="btn btn-default" v-on="click: mode='modeAddNew'">新增</button>
  			</div>
			<form id="search" class="form-group">
				<div class="col-sm-offset-3 col-sm-3">
					<input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery" class="form-control" required />
				</div>
				<div class="col-sm-2">
					<button id='search' class="btn btn-outline btn-block btn-success save"><strong>搜索</strong></button>
				</div>
				<div class="col-sm-1 text-left vertical-middle-sm">
					<h5><strong>
						<a role="button" data-toggle="collapse" href="#advancedsearch" aria-expanded="false" aria-controls="advancedsearch">高级...</a>
					</strong></h5>
				</div>
			</form>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-12">
			<br/>
		</div>
	</div>
	
	<div class="row">
		<div class="collapse col-sm-12" id="advancedsearch">
			<div class="well"> 
				<div>
					<form class="form-horizontal contract-form">
						<div class="form-group">
							<label class="col-sm-1 control-label">Begin Time</label>
							<div class="col-sm-4">
								<input id="begintime" name="begintime" type="text" v-model="begintime" value="2015-01-01" class="form-control" required />
							</div>
							<label class="col-sm-3 control-label">End Time</label>
							<div class="col-sm-4">
								<input id="endtime" name="endtime" type="text" v-model="endtime" value="2015-02-01"
									class="form-control" required />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label">Logger Id</label>
							<div class="col-sm-4">
								<input id="deviceid" name="deviceid" type="text" v-model="remotedevice" value=""
									class="form-control" required />
							</div>
						</div>
						<div class="row">
							<div class="col-sm-offset-9 col-sm-1">
								<button class="btn btn-outline btn-block btn-warning">清除</button>
							</div>
							<div class="col-sm-2">
								<!--
								<button id='submitbutton' type="submit" class="btn btn-outline btn-lg btn-block save">Submit</button>
								-->
								<button id='submitbutton' class="btn btn-outline btn-block btn-success save">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div> <!-- advancedsearch -->
	</div>
	<!--
	<div class="row">
		<div class="col-sm-12">
			<br/>
		</div>
	</div>
	-->
	<div class="row">
		<div class="table-responsive col-sm-12">
			<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr class="info"> 
				<th>选择</th> 
				<th>唯一标识</th> 
				<th>姓名</th> 
				<th>性别</th> 
				<th>Email</th> 
				<th>移动电话</th> 
				<th>操作</th> 
				</tr>
				<!--
				<tr> 
				<th>#</th> 
				<th>Timestamp</th> 
				<th>Device Node</th> 
				<th>Payload</th> 
				<th>Operation</th> 
				</tr> 
				-->
			</thead>
			<!--
			<tfoot>Table footer</tfoot>			
			-->
			<tbody>
				<tr v-repeat="item:items" track-by="rowid">
				<td><input type="checkbox" v-model="item.selected"> </td> 
				<td>{{item.timestamp}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.frame}}</td> 
				<td>{{item.frame}}</td> 
				<td>
				<!--
				<button class="btn btn-default btn-xs " v-on="click:removeItem(item,$event)"> 删除 </button>
				<button class="btn btn-default btn-xs " v-on="click:editItem(item,$event)"> 编辑 </button>
				-->
				<a href="#" v-on="click:editItem(item,$event)"> 删除 </a> | 
				<a href="#" v-on="click:showModal=true"> 编辑 </a>
				<!--
				<a href="#" v-on="click:mode='modeEdit'"> 编辑 </a>
				-->
				</td>
				</tr> 
			</tbody>
			</table>
		</div>
	
		<div class="col-sm-12">
		注：输入流数据来自实际测试过程中记录的数据文件。本模块仅用于查看数据的内容以辅助判断数据的正确性。
		</div>
		
		<div class="col-sm-12">
		<hr />
		<p>for Debug only: Should be removed in released version </p>
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</div>
	
	</div> 
	
	<div id="objectviewer" class="row" v-show="mode=='modeItemView'">
		object viewer
	</div>
	
	<!--
	<div id="objecteditor" class="row" v-show="(mode=='modeEdit') || (mode='modeAddNew')">
		object editor
	</div>
	-->
	<div id="objecteditor" class="row" v-show="mode=='modeAddNew'">
		object editor
	</div>
	
	<!--
	</div>
			<div role="tabpanel" class="tab-pane" id="profile">...</div>
			<div role="tabpanel" class="tab-pane" id="messages">...</div>
			<div role="tabpanel" class="tab-pane" id="settings">...</div>
		  </div>
		</div>	
	</div>
	-->
	
		
	<!-- template for the modal component -->
	<template id="modal-template">
	  <div class="modal-mask" v-show="show" v-transition="modal">
		<div class="modal-wrapper">
		  <div class="modal-container">
			<content select=".modal-header">
			  <div class="modal-header">
				default header
			  </div>
			</content>
			<content select=".modal-body">
			  <div class="modal-body">
				default body
			  </div>
			</content>
			<content select=".modal-footer">
			  <div class="modal-footer">
				default footer
				<button class="modal-button"
				  v-on="click: show=false">
				  Cancel
				</button>
				<button class="modal-default-button"
				  v-on="click: show=false">
				  OK
				</button>
			  </div>
			</content>
		  </div>
		</div>
	  </div>
	</template>

	<!-- use the modal component, pass in the prop -->
	<modal show="{{@showModal}}">
    <!--
      you can use custom content here to overwrite
      default content
    -->
	
    <div class="modal-header col-sm-16">
      <h3>custom header</h3>
    </div>
	
	<div class="modal-body col-sm-16">
		<div class="row">
			<div class="col-sm-8">
				<div class="col-sm-1">
					<label>Id</label>
				</div>
				<div class="col-sm-1">
					<input id="wineId2" name="id" type="text" value="test" disabled />
				</div>
				<div class="col-sm-1">
					<label>Id2</label>
				</div>
				<div class="col-sm-2">
					<input id="wineId" name="id" type="text" value="test" disabled />
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-8">
				<div class="col-sm-1">
					<label>Id</label>
				</div>
				<div class="col-sm-1">
					<input id="wineId" name="id" type="text" value="test" disabled />
				</div>
				<div class="col-sm-1">
					<label>Id</label>
				</div>
				<div class="col-sm-2">
					<input id="wineId" name="id" type="text" value="test" disabled />
				</div>
			</div>
		</div>

			
		<!--
		<div class="form-left-col">
		<label>Id:</label>
		<input id="wineId" name="id" type="text" value="<%= id %>" disabled />

		<label>Name:</label>
		<input type="text" id="name" name="name" value="<%= name %>" required/>

		<label>Country:</label>
		<input type="text" id="country" name="country" value="<%= country %>"/>

		<label>Region:</label>
		<input type="text" id="region" name="region"  value="<%= region %>"/>
	<div class="form-right-col">
		<img height="300" src="pics/<%= picture %>"/>
		<label>Notes:</label>
		<textarea id="description" name="description"><%= description %></textarea>
	</div>
		-->

		<button class="save">Save</button>
		<button class="delete">Delete</button>
		
	</div>
	</modal>

    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../lib/vue/0.12.10/vue.js"></script>
    <script src="member-v4.js"></script>
</body>
</html>